<template>
	<div id='addEmployee'>
		<div class="title">{{title}}</div>
		<div class="content">
      <div class="title">Add Employee</div>
      <Form class="add-employee-form" ref="addEmployeeForm"  :model="addEmployeeModel" :rules="addEmployeeRules" :label-width="100" label-position="left">
        <div class="sub-info-item">
          <div class="sub-title">Basic Information</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"  label="Employee ID">
                  <Input v-model="addEmployeeModel.employeeCode" ></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Status" prop="status">
                  <Select v-model="addEmployeeModel.status" >
                    <Option value="1">Active</Option>
                    <Option value="2">InActive</Option>
                  </Select>
                </Form-item>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"  label="First Name" prop="firstName">
                  <Input v-model="addEmployeeModel.firstName"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="M.l" prop="middleName">
                  <Input v-model="addEmployeeModel.middleName"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Last Name" prop="lastName">
                  <Input v-model="addEmployeeModel.lastName"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Preferred Name" :label-width="120">
                  <Input v-model="addEmployeeModel.preferredName"></Input>
                </Form-item>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                  <Form-item class="form-item"  label="SSN" prop="ssn">
                    <Tooltip content="the format is like '333-22-4444'" placement="right">
                      <Input v-model="addEmployeeModel.ssn"></Input>
                    </Tooltip>
                  </Form-item>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"  label="Gender" prop="gender">
                  <Select v-model="addEmployeeModel.gender" >
                    <Option value="1">FeMale</Option>
                    <Option value="2">Male</Option>
                  </Select>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Birth Date">
                  <Date-picker type="date"v-model="addEmployeeModel.birthDate" @change="" value="yyyy-MM-dd"  format="yyyy-MM-dd" @on-change="formatBirthDate" ></Date-picker>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Age" :label-width="40" >
                  {{formatBirthDay(addEmployeeModel.birthDate)}}
                </Form-item>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="sub-info-item">
          <div class="sub-title">Address</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="18">
                <Form-item class="form-item"  label="Home Address" :label-width="110">
                  <Input v-model="addEmployeeModel.homeAddress"></Input>
                </Form-item>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"  label="City or town" prop="city">
                  <Input v-model="addEmployeeModel.city"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Zip Code" prop="zipCode">
                  <Input v-model="addEmployeeModel.zipCode"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="State" >
                  <Select v-model="addEmployeeModel.stateId"  @on-change="stateChange" :label-in-value="true">
                    <Option v-for="(item,key) in employeeForm.listState" :value="item.stateId" :key="key">{{item.name}}</Option>
                  </Select>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Country" >
                  <Select v-model="addEmployeeModel.countryId" @on-change="countryChange" :label-in-value="true">
                    <Option v-for="(item,key) in employeeForm.listCountry" :value="item.countryId" :key="key">{{item.name}}</Option>
                  </Select>
                </Form-item>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="sub-info-item">
          <div class="sub-title">Contact</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"  label="Email" prop="emailAddress">
                  <Input v-model="addEmployeeModel.emailAddress"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"  :label-width="1">
                  <Checkbox v-model="addEmployeeModel.invite">invite</Checkbox>
                </Form-item>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"   label="Phone">
                 <Input-number  v-model="addEmployeeModel.cellPhone"></Input-number>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Home Tel">
                  <Input v-model="addEmployeeModel.homeTel"></Input>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"   label="Work Tel" >
                  <Input v-model="addEmployeeModel.workTel"></Input>
                </Form-item>
              </i-col>
            </Row>
          </div>
        </div>
        <div class="sub-info-item">
          <div class="sub-title">Job Information</div>
          <div class="sub-content">
            <Row class="sub-row">
              <i-col span="6">
              <Form-item class="form-item"  label="Effective Date">
                <Date-picker type="date"v-model="addEmployeeModel.effectiveDate" value="yyyy-MM-dd"  format="yyyy-MM-dd" @on-change="formatEffectiveDate"></Date-picker>
              </Form-item>
             </i-col>
              <i-col span="6">
                <Form-item class="form-item"  label="Org">
                  <Dropdown  trigger="click" style="width: 100%">
                    <Input v-model="orgName" icon="arrow-down-b" readonly>
                    <Dropdown-menu slot="list" style="width: 230px;height: 120px;">
                      <el-tree
                        class="filter-tree"
                        :expand-on-click-node="false"
                        :data="employeeForm.orgList"
                        :props="orgProps"
                        default-expand-all
                        @node-click="orgTreeClick"
                      >
                      </el-tree>
                    </Dropdown-menu>
                  </Dropdown>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"  label="Work Location" :label-width="110">
                  <Select v-model="addEmployeeModel.workAddressId" @on-change="workLocationChange" :label-in-value="true">
                    <Option v-for="(item,key) in employeeForm.companyAddressList" :key="key" :value="item.addressId">{{item.address}}</Option>
                  </Select>
                </Form-item>
              </i-col>
            </Row>
            <Row class="sub-row">
              <i-col span="6">
                <Form-item class="form-item"  label="Job Title">
                  <Select v-model="addEmployeeModel.jobId" @on-change="jobTitleChange" :label-in-value="true">
                    <Option v-for="(item,key) in employeeForm.pList" :key="key" :value="item.jobId">{{item.jobTitle}}</Option>
                  </Select>
                </Form-item>
              </i-col>
              <i-col span="6">
                <Form-item class="form-item"  label="Time Zone">
                  <Select v-model="addEmployeeModel.timeZoneId">
                    <Option v-for="(item,key) in timezoneList" :key="key" :value="item.timeId">{{item.timezoneId}}</Option>
                  </Select>
                </Form-item>
              </i-col>
            </Row>
          </div>
        </div>
        <Form-item class="form-item btn-group">
          <button type="button" @click="cancelSaveEmployee" class="default-btn">Cancel</button>
          <button type="button"  @click="saveEmployee" class="default-btn active">Done</button>
        </Form-item>
      </Form>
    </div>
	</div>
</template>

<script>
	export default {
		name: 'addEmployee',
		components: {},
		created(){
		  this.init();
    },
		computed:{
		  employeeForm(){
        return this.$store.getters.employeeForm;
      },
      timezoneList(){
        return this.$store.getters.timezoneList;
      }
    },
		data () {
      var validateSSN = function (rule, value, callback) {
        if(!value){
          callback(new Error('the SSN is required'));
        }
        var reg = /^\d{3}-\d{2}-\d{4}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('the SSN format is error'));
        }
      }
      var validateZipCode = function (rule, value, callback) {
        if(!value){
          callback(new Error('the zipCode is required'));
        }
        var reg = /\d{5}/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('the zipCode format is error'));
        }
      }
			return {
				title: ' ',
        orgProps:{
          children: 'children',
          label: 'orgName'
        },
        orgName:'',
        addEmployeeModel:{
          employeeCode: null,
          firstName: null,
          orgId: null,
          department: null,
          middleName: null,
          lastName: null,
          effectiveDate: null,
          preferredName: null,
          jobTitle: null,
          jobId: null,
          countryId: null,
          country: null,
          stateId: null,
          state: null,
          status: null,
          birthDate: null,
          ssn: null,
          gender: null,
          timeZoneId: null,
          timeZone: null,
          age: null,
          homeAddress: null,
          homeAddressId: null,
          workAddress: null,
          workAddressId: null,
          emailAddress: null,
          cellPhone: null,
          homeTel: null,
          workTel: null,
          city: null,
          zipCode:null,
          invite:false,
        },
        addEmployeeRules:{
          status:[
            { required: true, message: 'status is required', trigger: 'blur' },
          ],
          firstName:[
            { required: true, message: 'firstName is required', trigger: 'blur' },
          ],
          middleName:[
            { required: true, message: 'middleName is required', trigger: 'blur' },
          ],
          lastName:[
            { required: true, message: 'lastName is required', trigger: 'blur' },
          ],
          ssn:[
            { required: true, validator: validateSSN,trigger: 'blur' },
          ],
          zipCode:[
            { required: true, validator: validateZipCode,trigger: 'blur' },
          ],
          gender:[
            { required: true, message: 'gender is required', trigger: 'blur' },
          ],
          city:[
            { required: true, message: 'city is required', trigger: 'blur' },
          ],
          emailAddress:[
            { required: true, message: 'email is required', trigger: 'blur' },
          ],
        }
			}
		},
    methods:{
      init(){
        this.getEmployeeForm();
        this.getAllTimezone();
      },
      getAllTimezone(){
        this.$store.dispatch('getAllTimezone');
      },
      formatBirthDay(date){
          if(date){
            return  new Date().getFullYear() - new Date(date).getFullYear();
          }
      },
      formatBirthDate(value){
         this.addEmployeeModel.birthDate = value;
      },
      formatEffectiveDate(value){
        this.addEmployeeModel.effectiveDate = value;
      },
      orgTreeClick(data){
        this.addEmployeeModel.orgId = data.orgId;
        this.addEmployeeModel.department = data.orgName;
        this.orgName = data.orgName;
      },
      stateChange(data){
        this.addEmployeeModel.state = data.name;
        this.addEmployeeModel.countryId = data.countryId;
      },
      countryChange(data){
        console.log(data)
        this.addEmployeeModel.country = data.label;
      },
      jobTitleChange(data){
        this.addEmployeeModel.jobTitle = data.label;
      },
      workLocationChange(data){
        this.addEmployeeModel.country = data.label;
      },
      workLocationChange(data){
        this.addEmployeeModel.workAddress = data.label;
      },
      getEmployeeForm(){
        this.$store.dispatch('getEmployeeForm');
      },
      saveEmployee(){
        this.$refs['addEmployeeForm'].validate((valid) => {
          if (valid) {
            this.$store.dispatch('saveEmployee',this.addEmployeeModel).then(
              ()=>{
                this.$Message.success('add employee success');
                this.$router.push('/views/org/employee');
              }
            );
          }
        })
      },
      cancelSaveEmployee(){
        this.$router.push('/views/org/employee');
      }
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";

	#addEmployee {
    >.content {
      padding: 12px 0;
      >.title{
        font-size: 20px;
        color: #325570;
        padding: 20px 80px;
      }
      &.edit-content {
        background: #FFFFF0;
      }
      .add-employee-form {
        padding: 0 40px;
        .form-item {
          padding-right: 20px;
          &.btn-group {
            text-align: right;
            padding-right: 80px;
            button {
              margin-right: 20px;
            }
          }
        }
        .ivu-form-item-label {
          position: relative;
          font-size: 14px;
          color: #335570;
          &:before{
            position: absolute;
            right: 12px;
            font-size: 14px;
          }
        }
        .sub-info-item {
          padding: 0 27px;
          .sub-title {
            position: relative;
            /*font-family: PingFangTC-Medium;*/
            font-size: 16px;
            color: #325570;
            &:before {
              content: "";
              display: inline-block;
              width: 8px;
              height: 8px;
              margin-right: 12px;
              background-color: $baseColor;
              border-radius: 50%;
            }
          }
          .sub-content {
            padding: 18px 35px;
            .sub-row {
              margin-bottom: 10px;
              /* font-family: PingFangTC-Regular;*/
              font-size: 14px;
              .label {
                color: #96ACB9;
                display: inline-block;
                width: 80px;
                margin-right: 12px;
              }
              .value {
                color: #325570;
              }
            }
            .flex-row {
              display: flex;
              .flex-item {
                flex: 1;
                padding-right: 20px;
                &:last-child {
                  padding-right: 0;
                }
              }
            }
          }
          /*job table*/
          .job-table {
            border: 0;
            .ivu-table:before, .ivu-table:after {
              width: 0;
              height: 0;
            }
          }
        }
      }
    }
	}
</style>
